<template>
    <div class="chart-container">
      <h2 class="chart-title">零食可视化展示</h2>
      <a-button type="primary" @click="handleGoHome" style="margin-right: 16px">主界面</a-button>
      <div class="chart-row">
        <div ref="barChart1" class="chart"></div>
        <div ref="barChart2" class="chart"></div>
      </div>
      <div class="chart-row-mid">
        <!-- <div ref="lineChart" class="chart"></div> -->
        <div ref="pieChart" class="chart"></div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import * as echarts from 'echarts';
  import 'echarts-wordcloud';
  export default {
  data() {
    return {
      barChart1Instance: null,
      barChart2Instance: null,
      // lineChartInstance: null,
      pieChartInstance: null
    };
  },
  mounted() {
    this.renderCharts();
  },
  methods: {
    renderCharts() {
      this.barChart1Instance = echarts.init(this.$refs.barChart1);
      this.wordCloudChartInstance = echarts.init(this.$refs.barChart2);
      // this.lineChartInstance = echarts.init(this.$refs.lineChart);
      this.pieChartInstance = echarts.init(this.$refs.pieChart);

      // 模拟数据
      const count = [373, 695, 469, 335, 219, 62, 38];
      const shopFreq = [
        { name: '良品铺子', value: 80 },
        { name: '三只松鼠', value: 86 },
        { name: '百草味', value: 52 },
        { name: '比比赞', value: 66 },
        { name: '亿滋', value: 37 },
        { name: '来伊份', value: 22 },
        { name: '乐事', value: 21 },
        { name: '德芙', value: 21 },
        { name: '华味亨', value: 21 },
        { name: '麦酥园食品饮料', value: 20 },
        { name: '每果时光', value: 20 },
        { name: '味滋源', value: 19 },
        { name: '葡记', value: 17 },
        { name: '卫龙', value: 16 },
        { name: '京东京造', value: 15 },
        { name: '盐津铺子', value: 14 },
        { name: '格力高', value: 14 },
        { name: '嘉友', value: 14 },
        { name: '新边界', value: 14 },
        { name: '盼盼', value: 14 },
        { name: '喜之郎', value: 13 },
        { name: '甘源', value: 13 },
        { name: '好丽友', value: 12 }
      ];

      const barOptions1 = {
        title: {
          show: true,
          text: '价格区间分布',
          textAlign: 'center',
          left: '50%',
          top: 'bottom'
        },
        xAxis: {
          type: 'category',
          data: ['0-10', '10-20', '20-30', '30-50', '50-100', '100-150', '150以上']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: count.map(value => ({
            value: value,
            itemStyle: {
              color: 'rgb(51, 102, 204)' // 柱状图颜色
            }
          })),
          type: 'bar'
        }],
        grid: {
          containLabel: true,
          left: '10%',
          right: '10%',
          bottom: '10%',
          top: '10%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        }
      };
      this.barChart1Instance.setOption(barOptions1);
      const wordCloudOptions = {
        title: {
          show: true,
          text: '品牌频率词云图',
          textAlign: 'center', 
          left: '50%', // 标题水平居中
          top: 'bottom' 
        },
      series: [{
        type: 'wordCloud',
        shape: 'circle',
        left: 'center',
        top: 'center',
        width: '70%',
        height: '80%',
        right: null,
        bottom: null,
        sizeRange: [12, 60],
        rotationRange: [-90, 90],
        rotationStep: 45,
        gridSize: 8,
        drawOutOfBound: false,
        textStyle: {
          normal: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: shopFreq
      }]
    };
    this.wordCloudChartInstance.setOption(wordCloudOptions);

      // 绘制折线图
      // const lineOptions = {
      //   xAxis: {
      //     type: 'category',
      //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
      //   },
      //   yAxis: {
      //     type: 'value'
      //   },
      //   series: [{
      //     data: data,
      //     type: 'line'
      //   }]
      // };
      // this.lineChartInstance.setOption(lineOptions);
      const pieOptions = {
  title: {
    show: true,
    text: '口味分布',
    textAlign: 'center', 
    left: '50%', 
    top: 'bottom'
  },
  series: [{
    type: 'pie',
    data: [
      {'value': 420, 'name': '混合口味'},
      {'value': 402, 'name': '原味'},
      {'value': 129, 'name': '香辣味'},
      {'value': 63, 'name': '麻辣味'},
      {'value': 51, 'name': '巧克力味'},
      {'value': 47, 'name': '牛奶味'},
      {'value': 45, 'name': '五香味'},
      {'value': 31, 'name': '烧烤味'},
      {'value': 20, 'name': '芝士味'},
      {'value': 20, 'name': '柠檬味'},
      {'value': 14, 'name': '卤香味'},
      {'value': 14, 'name': '芝麻味'},
      {'value': 12, 'name': '鲜虾味'},
      {'value': 12, 'name': '奶香味'},
      {'value': 12, 'name': '奶油味'},
      {'value': 11, 'name': '椒盐味'},
      {'value': 10, 'name': '泡椒味'},
      {'value': 10, 'name': '蒜香味'},
      {'value': 10, 'name': '鸡蛋味'},
      {'value': 10, 'name': '草莓味'},
      {'value': 9, 'name': '蔓越莓味'},
      {'value': 9, 'name': '抹茶味'},
      {'value': 9, 'name': '香葱味'},
      {'value': 9, 'name': '肉松味'},
      {'value': 9, 'name': '红豆味'},
      {'value': 9, 'name': '酸辣味'},
      {'value': 8, 'name': '牛肉味'},
      {'value': 7, 'name': '蜜汁味'},
      {'value': 7, 'name': '海苔肉松味'},
      {'value': 7, 'name': '焦糖味'}
    ]
  }],
  tooltip: {
    trigger: 'item', // 触发方式为项数据触发
    formatter: '{a} <br/>{b}: {c} ({d}%)' // 提示信息格式化
  }
};
this.pieChartInstance.setOption(pieOptions);


    },
    handleGoHome() {
      this.$router.push('/home');
  }
  }
  
};

  </script>
  
  <style>
  .chart-container {
    width: 90vw;
	height: 100vh;
    background-image: url('/assets/image/filebg.jpg'); 
    background-size: cover;
    padding: 20px;
  }
  
  .chart-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .chart-row-mid {
  display: flex;
  justify-content: center;
}
  
  .chart {
  width: 48%;
  height: 300px;
  background-color: white;
}
.el-select__placeholder {
  width: 200px;
  margin: 0 auto;
}

</style>

